﻿@model IList<SusuCMS.PageType>
@using System.Text;
@functions{
    void CreateSubTree(PageType parent, IList<PageType> list, StringBuilder builder)
    {
        var children = list.Where(i => i.ParentId == parent.Id);
        if (children.Count() > 0)
        {
            builder.Append("<ul>");
            foreach (var item in children)
            {
                builder.AppendFormat("<li><a href='{0}'>{1}</a>", Url.Action("Index", "Page", new { pageTypeId = item.Id }), item.Name);
                if (list.Any(i => i.ParentId == item.Id))
                {
                    CreateSubTree(item, list, builder);
                }
                builder.Append("</li>");
            }
            builder.Append("</ul>");
        }
    }
}
@{
    var builder = new StringBuilder();
    foreach (var item in Model.Where(i => i.ParentId == null))
    {
        builder.AppendFormat("<li><a href='{0}'>{1}</a>", Url.Action("Index", "Page", new { pageTypeId = item.Id }), item.Name);
        CreateSubTree(item, Model, builder);
        builder.Append("</li>");
    }
}
<p class="buttons">
    @Html.ActionLink("Manage PageType".Localize(), "Index", "PageType")
</p>
<ul id="tree-menu" class="treeview-default">
    <li><a href="#" class="root">@("Root PageType".Localize())</a>
        <ul>
            @Html.Raw(builder.ToString())
        </ul>
    </li>
</ul>
@using (Html.BeginForm("Move", "PageType", FormMethod.Post, new { id = "PageTypeMoveForm" }))
{
    @Html.Hidden("id")
    @Html.Hidden("parentId")
}
<script type="text/javascript">
    $(document).ready(function () {
        // highlight tree menu item.
        $('#tree-menu li a').not('a.root').each(function () {
            var url = $(this).attr('href');
            if (url.substr(url.lastIndexOf('/') + 1) == '@(ViewBag.CurrentPageTypeId)') {
                $(this).addClass('selected');
            }
        });

        $('#tree-menu li a').not('a.root').draggable({
            helper: 'clone',
            cursor: 'default',
            opacity: 0.75,
            refreshPositions: true,
            revert: 'invalid',
            revertDuration: 300,
            scroll: true,
            delay: 100,
            cursorAt: { left: -10, top: -10 }
        });

        $('#tree-menu li a').droppable({
            hoverClass: 'drop-hover',
            tolerance: 'pointer',
            drop: function (event, ui) {
                var url1 = $(ui.draggable).attr('href');
                $('input[type=hidden][name=id]').val(url1.substr(url1.lastIndexOf('/') + 1));

                var url2 = $(this).attr('href');
                $('input[type=hidden][name=parentId]').val(url2.substr(url2.lastIndexOf('/') + 1));
                $('#PageTypeMoveForm').submit();
            }
        });

        $('#tree-menu').treeview({
            animated: 'fast',
            collapsed: false,
            unique: true,
            persist: 'location'
        });
    });
</script>
